<template>
  <div class="zhzxgzt-content">
    <!-- 数据资产概览 -->
    <div class="sjzcgl-content">
      <LabelTitle text="综合数据" :showImg="false"></LabelTitle>
      <div class="time-select">
        <span
          class="btn"
          :class="{ active: currentTime == 1 }"
          @click="selectTime(1)"
          >近24小时</span
        >
        <span
          class="btn"
          :class="{ active: currentTime == 7 }"
          @click="selectTime(7)"
          >近7天</span
        >
        <span
          class="btn hasborder"
          :class="{ active: currentTime == 30 }"
          @click="selectTime(30)"
          >近30天</span
        >
      </div>
    </div>
    <!-- 综合数据 -->
    <zhsj :allData="allData"></zhsj>
    <div class="box-flex">
      <div class="left-box">
        <sjlxfx :allData="allData"></sjlxfx>
        <sjdjfx :allData="allData"></sjdjfx>
        <ypjgfx :allData="allData"></ypjgfx>
      </div>
    </div>
    <div class="bottom-box">
      <LabelTitle
        :text="'全部待研判事件(' + totalNum + ')'"
        :showImg="false"
      ></LabelTitle>
      <div class="rightbtn" @click="jumpAllData">查看全部 ></div>
      <div class="list-content">
        <dypsj :list="tableList"></dypsj>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ScaleMin } from "@/utils/screen-scale-mixin.js";
const { scaleStyle } = ScaleMin();
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import zhsj from "./component/zhsj.vue";
import sjzldy from "./component/sjzldy.vue";
import sjlxfx from "./component/sjlxfx.vue";
import sjdjfx from "./component/sjdjfx.vue";
import ypjgfx from "./component/ypjgfx.vue";
import dypsj from "./component/sjlbImg.vue";
import { useUserStore } from "@/pinia/user.js";
import { getDataTotalList } from "@/api/event";
import { getzhsjandtypeData, getdaiyanqianshijianData } from "@/api/zhzx.js";
const piniaUser = useUserStore();
import { TabbarList } from "@/pinia/tabbar.js";
let piniaTab = TabbarList();

let currentTime = ref(7);

let tableList = ref([
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
  // {
  //   url: "",
  //   time: "2024-11-11 10:10:01",
  //   address: "新开路交口",
  // },
]);

const selectTime = (time) => {
  currentTime.value = time;
  getData();
};

let allData = ref({});
const getData = async () => {
  try {
    let { data } = await getzhsjandtypeData({
      timePeriod: currentTime.value, //1,7,30
    });
    allData.value = data;
  } catch (e) {
    console.error(e);
  }
};

const jumpAllData = () => {
  // 跳转到待研判事件列表
  piniaTab.add({
    name: "待研判列表",
    path: "/yplb",
    icon: "",
    query: {},
    meta: {
      hidden: false,
      title: "",
    },
  });
};

// 待研判事件
let totalNum = ref(0);
const getWaitTodo = async () => {
  try {
    let { data } = await getdaiyanqianshijianData({
      eventCode: "",
      orgId: "",
      startDate: "",
      endDate: "",
      pageNum: 1,
      pageSize: 10,
      eventStatus: "0",
    });
    tableList.value = data.reportList;
    totalNum.value = data.total;
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getData();
  getWaitTodo();
});
</script>
<style lang="scss" scoped>
.time-select {
  position: absolute;
  right: 0;
  top: -10px;
  width: 210px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .btn {
    background: #fff;
    display: inline-block;
    width: 70px;
    height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #2263bf;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    &.active {
      background: #2263bf;
      color: #ffffff;
    }
    &.hasborder {
      border-left: 1px solid rgba(151, 151, 151, 0.21);
      border-right: 1px solid rgba(151, 151, 151, 0.21);
    }
  }
}
.zhzxgzt-content {
  width: 100%;
  // height: 100%;
  .sjzcgl-content {
    width: 100%;
    position: relative;
  }
  .box-flex {
    margin-top: 20px;
    width: 100%;
    // height: calc(100% - 60px);
    display: flex;
    align-items: top;
    .left-box {
      width: 100%;
      display: flex;
      align-items: top;
      justify-content: space-between;
    }
  }
  .bottom-box {
    margin-top: 10px;
    position: relative;
    width: 100%;
    height: calc(100% - 460px);
    .rightbtn {
      position: absolute;
      right: 12px;
      top: 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #2263bf;
      line-height: 20px;
      cursor: pointer;
    }
    .list-content {
      width: 100%;
      height: calc(100% - 40px);
      margin-top: 15px;
    }
  }
}
</style>
